<template>
  <div id="app">
    <mt-header fixed title="首页">
      <mt-button slot="right" @click="onRegister">注册</mt-button>
      <mt-button slot="right" @click="onLogin">登录</mt-button>
    </mt-header>

    <component :is="tab" class="content"/>

    <!--  底部tabbar -->
    <mt-tabbar fixed v-model="selected">
      <mt-tab-item id="tab1">
        <img slot="icon" src="../assets/shouye.png">
        首页
      </mt-tab-item>
      <mt-tab-item id="tab2">
        <img slot="icon" src="../assets/faxian.png">
        发现
      </mt-tab-item>
      <mt-tab-item id="tab3">
        <img slot="icon" src="../assets/dingdan.png">
        订单
      </mt-tab-item>
      <mt-tab-item id="tab4">
        <img slot="icon" src="../assets/me.png">
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
  import home from '../components/home'
  import vip from '../components/vip'
  import cart from '../components/cart'
  import search from '../components/search'

  export default {
    name: "main",
    data() {
      return {
        selected: 'tab1',
        tab: 'home'
      }
    },
    components: {
      home,
      vip,
      cart,
      search
    },
    watch: {
      selected: function (newV, oldV) {
        if (newV == 'tab1') {
          this.tab = 'home'
        } else if (newV == 'tab2') {
          this.tab = 'vip'
        } else if (newV == 'tab3') {
          this.tab = 'cart'
        } else if (newV == 'tab4') {
          this.tab = 'search'
        }
      }
    },
    methods: {
      onRegister(e) {
        this.$router.push({name: 'news'})
      },
      onLogin(e) {
        this.$router.push({name: 'news'})
      }
    }
  }
</script>

<style scoped>
  .content {
    padding-top: 41px;
    padding-bottom: 55px;
  }
</style>
